<template>
  <div class="boxstyle" style="height: 300px">
    <div class="title">实时统计</div>
    <div class="info-main">
      <ul>
        <li v-for="v in items" :key="v.id">
          <img :src="`src/assets/img/${v.img_url}`" alt="" />
          <p>{{ v.title }}</p>
          <countTo :startVal="0" :endVal="v.num" :duration="5000"></countTo>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { CountTo } from "vue3-count-to";

const items = ref([
  { id: 1, title: "车辆总数(辆)", img_url: "info-img-1.png", num: 3333454 },
  { id: 2, title: "车辆总数(辆)", img_url: "info-img-2.png", num: 967 },
  { id: 3, title: "车辆总数(辆)", img_url: "info-img-3.png", num: 4678 },
  { id: 4, title: "车辆总数(辆)", img_url: "info-img-4.png", num: 77 },
]);
</script>

<style scoped></style>
